import { createBooleanEditor, createInputTextEditor, createRadioGroupEditor, createColorEditor, createSelectEditor } from "./property-editor-factory";
import { registerCommonProperty, registerEventProperty } from "./propertyRegister";

// ====== 注册 额外的组件编辑器 ====== //
// Vue.component(propEditorName, editorComponent)
const comps = {}

// ------表格的设置
// ==表格头
registerCommonProperty("defaultRowValue", "defaultRowValue-editor");
registerCommonProperty("tableTopLabel", "tableTopLabel-editor");
registerCommonProperty("textColor", "textColor-editor");
comps['textColor-editor'] = createColorEditor("textColor", "designer.setting.textColor")
const tableTopLabelEditor = function () {
  return {
    components: {
      'tableTopLabel_editor': createInputTextEditor("tableTopLabel", "designer.setting.tableTopLabel"),
      'tableTopLabelPadding_editor': createInputTextEditor("tableTopLabelPadding", "designer.setting.tableTopLabelPadding"),
      'tableTopBgcolor_editor': createColorEditor("tableTopBgcolor", "designer.setting.tableTopBgcolor"),
      'tableTopLabelAlign_editor': createRadioGroupEditor("tableTopLabelAlign", "designer.setting.tableTopLabelAlign", {
        optionItems: [
          { label: '左', value: 'left' },
          { label: '中', value: 'center' },
          { label: '右', value: 'right' }
        ]
      }),
      'textColor_editor': comps['textColor-editor']
    },
    props: {
      optionModel: Object,
    },
    render() {
      return <div>
        <el-divider class="custom-divider-margin-top">
          表格头
        </el-divider>
        <tableTopLabel_editor optionModel={this.optionModel} />
        <tableTopLabelPadding_editor optionModel={this.optionModel} />
        <tableTopBgcolor_editor optionModel={this.optionModel} />
        <tableTopLabelAlign_editor optionModel={this.optionModel} />
        <textColor_editor optionModel={this.optionModel} />
        <el-divider class="custom-divider-margin-top" />
      </div>
    }
  }
}
comps['tableTopLabel-editor'] = tableTopLabelEditor()

// ==
comps['autosize-editor'] = createBooleanEditor("autosize", "designer.setting.autosize")
registerCommonProperty("autosize", "autosize-editor");
comps['renderShow-editor'] = createBooleanEditor("renderShow", "designer.setting.renderShow")
registerCommonProperty("renderShow", "renderShow-editor");
comps['perviewShow-editor'] = createBooleanEditor("perviewShow", "designer.setting.perviewShow")
registerCommonProperty("perviewShow", "perviewShow-editor");
comps['buttonLabel-editor'] = createInputTextEditor("buttonLabel", "designer.setting.buttonLabel")
registerCommonProperty("buttonLabel", "buttonLabel-editor");
registerCommonProperty("buttonType", "buttonType-editor");
registerCommonProperty("colSummary", "colSummary-editor");
registerCommonProperty("colSummaryHandle", "colSummaryHandle-editor");
// 是否对列进行 行同值合并
registerCommonProperty("colSpanMethod", "colSpanMethod-editor");
comps["colSpanMethod-editor"] = createBooleanEditor(
  "colSpanMethod",
  "designer.setting.colSpanMethod")

comps["backgroundColor-editor"] = createColorEditor("backgroundColor", "designer.setting.backgroundColor")
registerCommonProperty("backgroundColor", "backgroundColor-editor");
registerCommonProperty("rowEnabled", "rowEnabled-editor");
comps["rowEnabled-editor"] = createBooleanEditor(
  "rowEnabled",
  "designer.setting.rowEnabled")
registerCommonProperty("tableColField", "table_col_field-editor");

registerCommonProperty("tableLabel", "tableLabel-editor");
comps["tableLabel-editor"] = createInputTextEditor(
  "tableLabel",
  "designer.setting.tableLabel")
registerCommonProperty("tableSize", "tableSize-editor");
comps["tableSize-editor"] = createSelectEditor(
  "tableSize",
  "designer.setting.tableSize",
  {
    optionItems: [
      { label: 'medium', value: 'medium' },
      { label: 'small', value: 'small' },
      { label: 'mini', value: 'mini' }
    ]
  })
registerCommonProperty("tableAlign", "tableAlign-editor");
comps["tableAlign-editor"] = createRadioGroupEditor(
  "tableAlign",
  "designer.setting.tableAlign",
  {
    optionItems: [
      { label: '左', value: 'left' },
      { label: '中', value: 'center' },
      { label: '右', value: 'right' }
    ]
  })
registerCommonProperty("tableCols", "tableCols-editor");
registerCommonProperty("colWidth", "colWidth-editor");
registerCommonProperty("showOverflowTooltip", "showOverflowTooltip-editor");
registerCommonProperty("highLightCurrentRow", "highLightCurrentRow-editor");
// registerCommonProperty("showOverflowTooltip", "showOverflowTooltip-editor");
comps["colWidth-editor"] = createInputTextEditor("colWidth", "designer.setting.colWidth")
comps["highLightCurrentRow-editor"] = createBooleanEditor("highLightCurrentRow", "designer.setting.highLightCurrentRow")
comps["showOverflowTooltip-editor"] = createBooleanEditor("showOverflowTooltip", "designer.setting.showOverflowTooltip")
// ------卡片的设置
comps["card-folded-editor"] = createBooleanEditor("folded", "extension.setting.cardFolded")
comps["card-showFold-editor"] = createBooleanEditor("showFold", "extension.setting.cardShowFold")
registerCommonProperty("folded", "card-folded-editor");
registerCommonProperty("showFold", "card-showFold-editor");
// ------监听事件
registerEventProperty("onPush", "onPush-editor");
registerEventProperty("onListener", "onListener-editor");
// ------layout
registerCommonProperty("span", "col-span-editor");
registerCommonProperty("offset", "col-offset-editor");
registerCommonProperty("push", "col-push-editor");
registerCommonProperty("pull", "col-pull-editor");
registerCommonProperty("gutter", "col-gutter-editor");
// ====== end ====== //

export default comps
